<template>
	<view class="login-container">
		<view class="login-box">
			<!-- 标题 -->
			<view class="title">
				<text class="main-title">账号登录</text>
				<text class="sub-title">Welcome Back</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-box">
				<!-- 用户名输入框 -->
				<view class="input-group">
					<text class="label">用户名</text>
					<input type="text" v-model="username" placeholder="请输入用户名" class="input-item" />
				</view>

				<!-- 密码输入框 -->
				<view class="input-group">
					<text class="label">密码</text>
					<input type="password" v-model="password" placeholder="请输入密码" class="input-item" />
				</view>

				<!-- 登录按钮 -->
				<button @click="handleLogin" class="login-btn" >登录</button>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			handleLogin() {
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}
				if(!this.password){
					uni.showToast({
						title:'请输入密码',
						icon:'none',
					});
					return;
				}

				if (this.username === 'admin' && this.password === '123456') {
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 2000
					});

					uni.setStorageSync('userInfo', {
						username: this.username
					});
					uni.setStorageSync('isLogin', true);

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/mine'
						});
					}, 2000);
				} else {
					uni.showToast({
						title: '用户名或密码错误',
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background-color: #ffffff;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.login-box {
			width: 100%;

			.title {
				margin-bottom: 80rpx;

				.main-title {
					display: block;
					font-size: 48rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.sub-title {
					font-size: 28rpx;
					color: #999;
				}
			}

			.form-box {
				.input-group {
					margin-bottom: 40rpx;

					.label {
						display: block;
						font-size: 28rpx;
						color: #666;
						margin-bottom: 20rpx;
					}

					.input-item {
						width: 100%;
						height: 90rpx;
						background: #f8f8f8;
						border-radius: 12rpx;
						padding: 0 30rpx;
						font-size: 30rpx;
						color: #333;
						border: 2rpx solid transparent;
						transition: all 0.3s;

						&:focus {
							border-color: #007AFF;
							background: #fff;
						}
					}
				}

				.login-btn {
					width: 100%;
					height: 90rpx;
					background: #007AFF;
					border-radius: 12rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
					margin-top: 60rpx;
					border: none;

					&:active {
						opacity: 0.9;
					}

					&[disabled] {
						background: #ccc;
						opacity: 0.8;
					}
				}
			}

			.tips {
				margin-top: 40rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999;

				text {
					display: block;
					line-height: 1.8;
				}
			}
		}
	}

	// 输入框占位符样式
	input::placeholder {
		color: #999;
	}
</style>